﻿var singlePerson = function (iden, text, user) {
    this.identity = iden;
    this.text = text;
    this.comments = [];
    this.commentDir = "right";
    this.clickHandler;
    this.user = user || "unknown";


    var _contentDiv = document.createElement("DIV");
    _contentDiv.className = "contentDiv";

    var _text = document.createElement("DIV");
    _text.className = "text";

    if (_text.innerText != undefined) {
        _text.innerText = text;
    }
    else {
        _text.textContent = text;
    }


    var _line = document.createElement("DIV");
    _line.className = "line";

    var _comment = document.createElement("DIV");
    _comment.className = "comment";

    var _msg = document.createElement("DIV");
    _msg.className = "msg";

    var _container = document.createElement("DIV");
    _container.className = "container";


    var _input = document.createElement("DIV");
    _input.className = "input";

    var _textarea = document.createElement("TEXTAREA");

    var _btn = document.createElement("INPUT");

    _btn.type = "button";
    _btn.className = "btn";

    _contentDiv.appendChild(_text);
    _contentDiv.appendChild(_line);
    _msg.appendChild(_container);
    _input.appendChild(_textarea);
    _comment.appendChild(_msg);
    _comment.appendChild(_input);
    _contentDiv.appendChild(_comment);
    _contentDiv.appendChild(_btn);

    var type = (navigator.userAgent.indexOf("Firefox") > 0) ? 'DOMMouseScroll' : 'mousewheel';
    var _me = this;

    var addHandler = function (elem, eventName, handler) {
        if (elem.attachEvent) {
            elem.attachEvent("on" + eventName, handler);
        } else if (elem.addEventListener) {
            elem.addEventListener(eventName, handler, false);
        }
    }

    var _funcHandler = function () { _me.scroll.call(_me, _container, event); };
    addHandler(_container, type, _funcHandler);


    _btn.onclick = function () {
        if (_me.UI.newComment.value != "") {
            if (_me.clickHandler) {
                _me.clickHandler.call(null, _me);
            }
        }
    }


    this.UI = {
        frame: _contentDiv
        , text: _text
        , newComment: _textarea
        , container: _container
        , btn: _btn
    };


    this.processStr = function (str) {
        if (str.length > 16) {
            return str.substring(0, 17) + "...";
        }

        return str;

    }

    this.insertComment = function (comment, author, iden) {
        var _item = document.createElement("DIV");
        _item.className = "item";

        var _bar = document.createElement("DIV");
        _bar.className = "bar";

        var _left = document.createElement("DIV");
        _left.className = "left";

        var _right = document.createElement("DIV");
        _right.className = "right";

        _bar.title = comment;
        var _strComment = this.processStr(comment);

        if (_left.innerText != undefined) {
            _left.innerText = _strComment;
        }
        else {
            _left.textContent = _strComment;
        }

        var _array = document.createElement("DIV");
        if (this.commentDir == "right") {
            _bar.className += " divright";
            _array.className = "arrayright";
            this.commentDir = "left";
        }
        else {
            _array.className = "arrayleft";
            this.commentDir = "right";
        }

        _bar.appendChild(_left);
        _bar.appendChild(_right);
        _item.appendChild(_bar);
        _item.appendChild(_array);

        var _refChild;
        for (var i = 0, ci; ci = this.UI.container.childNodes[i]; i++) {
            if (ci.className == "item") {
                _refChild = ci;
                break;
            }
        }

        if (_refChild) {
            this.UI.container.insertBefore(_item, _refChild);
        }
        else {
            this.UI.container.appendChild(_item);
        }

        this.comments[iden] = {
            ui: _item
            , str: comment
            , author: author
            , identity: iden
            , bar: _bar
            , left: _left
            , right: _right
        }
    }

    this.mousescroll = false;

    singlePerson.prototype.collection[iden] = this;
}

singlePerson.prototype.collection = [];
singlePerson.prototype.scroll = function (obj, evt) {
    var _evt = evt || window.event;
    _evt.stopPropagation && (_evt.preventDefault(), _evt.stopPropagation()) || (_evt.cancelBubble = true, _evt.returnValue = false);


    var direct = 0;
    if (_evt.wheelDelta) {
        direct = _evt.wheelDelta > 0 ? 1 : -1;
    } else if (_evt.detail) {
        direct = _evt.detail < 0 ? 1 : -1;
    }

    if (this.mousescroll) {
        return;
    }

    if (direct > 0 && obj.offsetTop >= 0) {
        obj.style.top = "0px";
        return;
    }

    if (direct < 0 && obj.offsetHeight + obj.offsetTop <= 141) {
        obj.style.top = -1 * (obj.offsetHeight - 141) + "px";
        return;
    }

    this.mousescroll = true;
    singlePerson.prototype.move.call(this, obj, direct, 47, 1, function () { this.mousescroll = false });

}

singlePerson.prototype.move = function (obj, dir, dis, seed, func) {
    if (dis == 0) {
        if (func) {
            func.apply(this);
        }
        return;
    }
    var _speed = seed * 2;
    var _disToGo = Math.min(_speed, dis);
    var _oT = obj.offsetTop;
    obj.style.top = (_oT + dir * _disToGo) + "px";

    var _this = this;
    var _args = arguments;
    setTimeout(function () {
        _args.callee.call(_this, obj, dir, dis - _disToGo, _speed, func);
    }, 33);
}



var pop = {
    initParams: {
        width: 300
        , height: 360
        , arraySize: 8
        , borderColor: "#0cf"
        , borderWidth: 8

    }
    , img: {
        imgItem: null
        , url: "images/float_div.png"
        , int: function () {
            if (this.url) {
                this.imgItem = new Image();
                this.imgItem.src = this.url;
                var _this = this;
                this.imgItem.onload = function () {
                    _this.isready = true;
                }
                var _tempStr = ";background-repeat:no-repeat;background-image:url(" + this.url + ");"
                this.topParam = _tempStr + "background-position:0px 0px;height:8px";
                this.leftParam = _tempStr + "background-position:0px -8px;width:8px";
                this.rightParam = _tempStr + "background-position:-308px -8px;width:8px";
                this.bottomParam = _tempStr + "background-position:0px -368px;height:8px";

            }
        }
        , isready: false
        , topParam: ""
        , leftParam: ""
        , rightParam: ""
        , bottomParam: ""
    }
    , init: function () {
        var width, height, arraySize, borderColor, borderWidth;
        width = this.initParams.width;
        height = this.initParams.height;
        arraySize = this.initParams.arraySize;
        borderColor = this.initParams.borderColor;
        borderWidth = this.initParams.borderWidth;


        var _w = isNaN(this.initParams.width) ? this.initParams.width : 300;
        var _h = isNaN(this.initParams.height) ? this.initParams.height : 360;

        this.initParams.height = _h;
        this.initParams.width = _w;
        this.img.int();

        var toppointer = document.createElement("DIV");
        var leftpointer = document.createElement("DIV");
        var rightpointer = document.createElement("DIV");
        var bottompointer = document.createElement("DIV");

        toppointer.style.cssText = "overflow:hidden;width:" + (_w + this.initParams.borderWidth * 2) + "px;" + this.img.topParam;
        leftpointer.style.cssText = "overflow:hidden;float:left;height:" + _h + "px;" + this.img.leftParam;
        rightpointer.style.cssText = "overflow:hidden;float:left;height:" + _h + "px;" + this.img.rightParam;
        bottompointer.style.cssText = "overflow:hidden;width:" + (_w + this.initParams.borderWidth * 2) + "px;" + this.img.bottomParam;

        this.pointerWidth = parseInt(_w / 3);
        this.pointerHeight = parseInt(_h / 3);

        var _singleWidth = "postion:relative;overflow:hidden;float:left;";
        var _singleHeight = "postion:relative;overflow:hidden;";

        var _t = 0;
        var _funcAdd = function (obj, str) {
            var _div = document.createElement("DIV");
            _div.id = obj.id + ++_t;
            _div.style.cssText = str;
            obj.appendChild(_div);
            return _div;
        }

        this.toppointer = _funcAdd(toppointer, _singleWidth);
        this.bottompointer = _funcAdd(bottompointer, _singleWidth);
        this.leftpointer = _funcAdd(leftpointer, _singleHeight);
        this.rightpointer = _funcAdd(rightpointer, _singleHeight);

        var _liCenter = document.createElement("DIV");
        _liCenter.id = "_liCenter";
        _liCenter.style.cssText = "overflow:hidden;"

        var cssStr = "width:" + _w + "px;height:" + _h + "px;background-color:white;overflow:hidden;float:left;";

        this.main.style.cssText = this.img.url ? cssStr : cssStr + "border:" + this.initParams.borderColor + " solid 1px;";

        _liCenter.appendChild(leftpointer);
        _liCenter.appendChild(this.main);
        _liCenter.appendChild(rightpointer);

        this.box.appendChild(toppointer);
        this.box.appendChild(_liCenter);
        this.box.appendChild(bottompointer);

        this.box.style.position = "absolute";
        this.box.style.display = "none";
        this.box.id = "box";

        document.body.appendChild(this.box);

    }
    , box: document.createElement("DIV")
    , toppointer: null
    , leftpointer: null
    , rightpointer: null
    , bottompointer: null
    , main: document.createElement("DIV")
    , pointerWidth: 0
    , pointerHeight: 0
    , setFunction: null
    , flags: {
        hoverFlag: undefined
    }
    , setPointer: function (direction, position) {
        var _repo = /^(top|bottom|left|right)$/
        var _re = /^[0-2]$/;
        if ((!_repo.test(direction)) || (!_re.test(position))) {
            return;
        }

        var _this = this;
        var _dirs = {
            top: { item: _this.toppointer, style: ";margin-left:", unit: "pointerWidth", arrayDisplay: "bottom", arrayContainer: "width:" + 2 * _this.initParams.arraySize + "px;height:" + _this.initParams.arraySize + "px;", arrayPos: "top:1px;" }
            , bottom: { item: _this.bottompointer, style: ";margin-left:", unit: "pointerWidth", arrayDisplay: "top", arrayContainer: "width:" + 2 * _this.initParams.arraySize + "px;height:" + _this.initParams.arraySize + "px;", arrayPos: "top:" + (_this.initParams.height + _this.initParams.borderWidth - 1) + "px;" }
            , left: { item: _this.leftpointer, style: ";margin-top:", unit: "pointerHeight", arrayDisplay: "right", arrayContainer: "width:" + _this.initParams.arraySize + "px;height:" + 2 * _this.initParams.arraySize + "px;", arrayPos: "left:1px;" }
            , right: { item: _this.rightpointer, style: ";margin-top:", unit: "pointerHeight", arrayDisplay: "left", arrayContainer: "width:" + _this.initParams.arraySize + "px;height:" + 2 * _this.initParams.arraySize + "px;", arrayPos: "left:" + (_this.initParams.width + _this.initParams.borderWidth - 1) + "px;" }
        }

        for (var item in _dirs) {
            _dirs[item].item.innerHTML = "";
        }

        var _pointer = _dirs[direction];
        _pointer.item.style.cssText = _pointer.item.style.cssText.replace(/;margin.+px;?/g, "") + _pointer.style + (parseInt((parseInt(position) + 0.3) * _this[_pointer.unit])) + "px;";


        var _innerDiv = document.createElement("div");
        _innerDiv.style.cssText = _pointer.arrayContainer;

        var _arrStr = "position:absolute;border-top:" + _this.initParams.arraySize + "px transparent solid;border-bottom:" + _this.initParams.arraySize + "px transparent solid;border-left:" + _this.initParams.arraySize + "px transparent solid;border-right: " + _this.initParams.arraySize + "px transparent solid;"

        var _divOut = document.createElement("div");
        var _divIn = document.createElement("div");

        var _reg1 = new RegExp("border-" + direction + ":.*?(;|$)");
        var _reg2 = new RegExp("border-" + _pointer.arrayDisplay + ":.*?(;|$)");

        _divOut.style.cssText = _arrStr.replace(_reg1, "").replace(_reg2, "border-" + _pointer.arrayDisplay + ":" + _this.initParams.arraySize + "px " + _this.initParams.borderColor + " solid;");

        _divIn.style.cssText = _arrStr.replace(_reg1, "").replace(_reg2, "border-" + _pointer.arrayDisplay + ":" + _this.initParams.arraySize + "px white solid;" + _pointer.arrayPos);

        _pointer.item.appendChild(_innerDiv);
        _innerDiv.appendChild(_divOut);
        _innerDiv.appendChild(_divIn);
    }
    , hidden: function () {
        document.body.removeChild(this.box);
    }

    , mouseIn: function (obj, parent) {
        if (obj._rand && this.flags.hoverFlag == obj._rand) { return; }
        if (!obj._rand) {
            obj._rand = this.tool.getRandom();
        }
        this.flags.hoverFlag = obj._rand;

        var _this = this;
        var _args = arguments;
        setTimeout(function () {
            if (_this.flags.hoverFlag == obj._rand) {
                _this.show.apply(_this, _args);
            }
        }, 250);
    }
    , mouseOut: function (obj, evt) {
        var _evt = evt || window.event;
        var _sourceElement = _evt.toElement || _evt.relatedTarget;
        var _arg = arguments;
        var _this = this;
        if (this.contains.attachContain(_sourceElement, obj, this.box) == -1) {
            this.hideBox();
        }
        this.box.onmouseout = function () { _arg.callee.apply(_this, _arg); }
    }
    , show: function (obj, parent) {
        this.DisplayBox();
        var _aleft = this.getPosition(obj)._X;
        var _atop = this.getPosition(obj)._Y;
        var _pleft = this.getPosition(parent)._X;
        var _ptop = this.getPosition(parent)._Y;

        var scrollDivHeight = parent.scrollTop;

        var _oleft = _aleft - _pleft;
        var _otop = _atop - _ptop - scrollDivHeight;

        var _ow = obj.offsetWidth;
        var _oh = obj.offsetHeight;

        var _w = this.initParams.width;
        var _h = this.initParams.height;

        var _fw = _w + this.initParams.arraySize + this.initParams.borderWidth;
        var _fh = _h + this.initParams.arraySize + this.initParams.borderWidth;

        var _l, _t;

        var _dir, _pos;

        if (_oleft >= _fw) {
            _dir = "right"
            _l = _aleft - _fw;
        }
        else {
            _dir = "left"
            _l = _aleft + _ow;
        }


        if (_otop >= _fh) {
            _t = _atop - _fh + _oh - scrollDivHeight;
            _pos = 2;
        }
        else {
            _t = _atop - scrollDivHeight;
            _pos = 0;
        }

        this.setPointer(_dir, _pos);
        this.box.style.left = _l + "px";
        this.box.style.top = _t + "px";
        this.setMainContent.apply(this, arguments);
    }
    , getPosition: function (e) {
        var t = e.offsetTop;
        var l = e.offsetLeft;
        while (e = e.offsetParent) {
            t += e.offsetTop;
            l += e.offsetLeft;
        }
        return { _X: l, _Y: t };
    }
    , setMainContent: function () {
        if (this.setFunction) {
            this.setFunction.apply(this, arguments);

        }
    }
    , DisplayBox: function () {
        this.box.style.display = "block";
        this.fade.fadeIn(this.main, 0);
    }

    , hideBox: function () {
        this.flags.hoverFlag = undefined;
        this.box.style.display = "none";
    }

   , fade: {
       fadeInHandler: null
       , fadeOutHandler: null
       , setOpacity: function (obj, opc) {
           if (!obj) { return; }
           var ctrl = obj;
           if (opc < 0 || opc > 100) {
               var _cssTxt = ctrl.style.cssText + ";";
               _cssTxt = _cssTxt.toLowerCase().replace(/-moz-opacity:.*?;/gi, "");
               _cssTxt = _cssTxt.toLowerCase().replace(/filter:\s*alpha\(opacity=.*?\);/gi, "");
               _cssTxt = _cssTxt.toLowerCase().replace(/opacity:.*?;/gi, "");
               ctrl.style.cssText = _cssTxt;

           }
           else {
               var _cssTxt = ctrl.style.cssText;
               _cssTxt = _cssTxt.replace(/;-moz-opacity:.*?;/gi, "") + ";-moz-opacity:" + (opc / 100) + ";";
               _cssTxt = _cssTxt.replace(/;filter:alpha\(opacity=.*?\);/gi, "") + ";filter:alpha(opacity=" + opc + ");";
               _cssTxt = _cssTxt.replace(/;opacity:.*?\..*?;/gi, "") + ";opacity:" + (opc / 100) + ";";
               ctrl.style.cssText = _cssTxt;
           }
       }
       , fadeIn: function (obj, opc) {
           if (!obj) { return; }
           if (opc > 100) {
               this.setOpacity(obj, opc);
               if (this.fadeInHandler) {
                   this.fadeInHandler.apply(this, arguments);
               }
               return;
           }
           this.setOpacity(obj, opc);
           opc += 15;
           var _this = this;
           var _args = arguments;
           setTimeout(function () { _args.callee.apply(_this, _args); }, 33);
       }
       , fadeOut: function (obj, opc) {
           if (opc < 0) {
               this.setOpacity(obj, opc);
               if (this.fadeOutHandler) {
                   this.fadeOutHandler.apply(this, arguments);
               }
               return;
           }
           this.setOpacity(obj, opc);
           opc -= 15;
           var _this = this;
           var _args = arguments;
           setTimeout(function () { _args.callee.apply(_this, _args); }, 33);
       }
   }
   , contains: {
       flag: 0
       , isContain: function (sourceObj, targetObj) {
           while (sourceObj != null && typeof (sourceObj.tagName) != "undefined") {
               if (sourceObj == targetObj) { return true; }
               sourceObj = sourceObj.parentNode;
           }
           return false;
       }
       , attachContain: function (sourceObj) {
           if (arguments.length <= 1) {
               return 0;
           }
           var _source = sourceObj;
           var _flag = false;
           for (var i = 1, ci; ci = arguments[i]; i++) {
               _flag = _flag || this.isContain(_source, ci);
               if (_flag) {
                   return 1;
               }
           }
           return -1;

       }

   }
   , logger: {
       item: null
       , init: function (parent) {
           var _span = document.createElement("SPAN");
           if (parent) {
               parent.appendChild(_span);
           }
           else {

               document.body.appendChild(_span);
           }
           this.item = _span;

       }
       , log: function (str) {
           if (!this.item) {
               return;
           }
           this.item.innerHTML += "<br />" + str;
       }
   }
   , tool: {
       getRandom: function () {
           var _date = new Date();
           var _time = [];
           _time.push(_date.getHours());
           _time.push(_date.getMinutes());
           _time.push(_date.getSeconds());
           _time.push(_date.getMilliseconds());
           return _time.join("");
       }

   }
   , spInterface: {
       mtitle: ""
        , mfrom: ""
        , mto: ""
        , SaveNewMessage: function (title, fromWho, toWho) {
            this.mtitle = title;
            this.mfrom = fromWho;
            this.mto = toWho;
            var _this = this;
            ExecuteOrDelayUntilScriptLoaded(function () {
                _this.SaveNewMessageHelper.apply(_this);
            }, "sp.js");

        }
        , SaveNewMessageHelper: function () {
            var clientContext = new SP.ClientContext.get_current();
            var web = clientContext.get_web();
            this.mfrom = web.get_currentUser();
            var list = web.get_lists().getByTitle("commentmessage");
            var itemCreationInfo = new SP.ListItemCreationInformation();
            var newItem = list.addItem(itemCreationInfo);

            newItem.set_item("Title", this.mtitle);
            newItem.set_item("From", this.mfrom);
            newItem.set_item("To", this.mto);
            newItem.update();
            var _this = this;

            clientContext.executeQueryAsync(Function.createDelegate(_this, _this.Succeeded), Function.createDelegate(_this, _this.Failed));

        }

        , Succeeded: function () {
            //Do nothing.
        }

        , Failed: function () {
            //Do nothing.  
        }
   }

}





